<template>
    <van-nav-bar title="急寻:面神经炎的治疗方法" left-arrow @click-left="onClickLeft" />
    <div class="noadoptionBox">
        <ul>
            <div>
                <li style="font-size: 16px; color: #3087ea;">【发布者姓名】</li>
                <li style="margin-left: 13px;" v-if="detailData.authorName">{{ detailData.authorName }}</li>
                <li style="margin-left: 13px;" v-else>暂无相关内容</li>
            </div>
            <div>
                <li style="font-size: 16px; color: #3087ea;">【病症】</li>
                <li style="margin-left: 13px;" v-if="detailData.disease">{{ detailData.disease }}</li>
                <li style="margin-left: 13px;" v-else>暂无相关内容</li>
            </div>
            <div>
                <li style="font-size: 16px; color: #3087ea;">【科室】</li>
                <li style="margin-left: 13px;" v-if="detailData.departmentName">{{ detailData.departmentName }}</li>
                <li style="margin-left: 13px;" v-else>暂无相关内容</li>
            </div>
            <div>
                <li style="font-size: 16px; color: #3087ea;">【病症详细】</li>
                <li style="margin-left: 13px;" v-if="detailData.disease">{{ detailData.disease }}</li>
                <li style="margin-left: 13px;" v-else>暂无相关内容</li>
            </div>
            <div>
                <li style="font-size: 16px; color: #3087ea;">【治疗经历】</li>
                <li style="margin-left: 13px;" v-if="detailData.treatmentProcess"> {{ detailData.treatmentProcess }}
                </li>
                <li style="margin-left: 13px;" v-else>暂无相关内容</li>
            </div>
            <div>
                <li style="font-size: 16px; color: #3087ea;">【相关图片】</li>
                <img :src="detailData.picture" alt="" v-if="detailData.picture">
                <img src="../../images/image/hdpi/doctor.png" alt="" v-else>
            </div>
            <div>
                <li style="font-size: 16px; color: green;">我的解答</li>
                 <li v-for="(comment, index) in comments" :key="index" style="margin-left: 13px;">
                    {{ comment }}
                </li>
            </div>
        </ul>
        <div class="footer">
            <p>{{ detailData.amount }}H币</p>
            <van-button type="primary" size="large" color="#3087ea" @click="showInput = true">我来解答</van-button>
        </div>
        <van-dialog v-model:show="showInput" title="输入你的回答">
            <van-field v-model="userInput" placeholder="请输入你的解答" />
            <template #footer>
                <van-button round @click="submitAnswer">提交</van-button>
                <van-button round @click="showInput = false">取消</van-button>
            </template>
        </van-dialog>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router'
import { bingXiang, publishComment } from '../../api/homeapi/patient'

const onClickLeft = () => history.back()

const route = useRoute();

const sickCircleId = reactive({ value: route.query.sickCircleId });
console.log(sickCircleId, 'sickCircleId');


const detailData:any = ref({});
const showInput = ref(false);
const userInput:any = ref('');
const comments:any = ref([]); 
console.log(userInput.value,'userInput')
const getDetailData = async (sickCircleId: any) => {
    try {
        const doctorId = JSON.parse(localStorage.getItem('doctorId') || '{}')
        const sessionId = JSON.parse(localStorage.getItem('sessionId') || '{}')
        const res = await bingXiang(doctorId, sessionId, sickCircleId) // 替换为实际的 API
        detailData.value = res.data.result
        console.log(detailData.value, 'lkdjl');

    } catch (error) {
        console.error('获取详情失败', error)
    }
}
const submitAnswer = async () => {
    const content:string=userInput.value
     
    try {
        const doctorId = JSON.parse(localStorage.getItem('doctorId') || '{}');
        const sessionId = JSON.parse(localStorage.getItem('sessionId') || '{}');
       const data= await publishComment(doctorId, sessionId, sickCircleId, content); // 确保 sickCircleId 传递正确
       console.log(data,'data');

        showInput.value = false;
        userInput.value = '';

           comments.value.push(content);
            
   
         
        // router.push('/');
    } catch (error) {
        console.error('发送评论失败', error);
    }
};
// const getpublishComment = async () => {
//     try {
//         const doctorId = JSON.parse(localStorage.getItem('doctorId') || '{}');
//         const sessionId = JSON.parse(localStorage.getItem('sessionId') || '{}');
//         // 这里可以根据需要添加内容
//         const content = ""; // 替换为实际内容
//         await publishComment(doctorId, sessionId, sickCircleId, content);
//         // 跳转到首页
//         router.push('/');
//     } catch (error) {
//         console.error('发送评论失败', error);
//     }
// };

onMounted(() => {
    const circleId = route.params.id
    if (circleId) {
        getDetailData(circleId)
    }
})
</script>
<style scoped lang="scss">
@import url('./noadoption.scss');
</style>